<template>
  <view class="example-page">
    <view class="content">
      <view class="title">页面弹窗 [u-popup-page]</view>
      <navigator url="/example/components/uPopupPage?type=page" hover-class="navigator-hover">
        <button>跳转到页面弹窗</button>
      </navigator>
      <navigator url="/example/components/uPopupPage?type=swiper" hover-class="navigator-hover">
        <button>跳转到轮播页面弹窗</button>
      </navigator>
    </view>
    <view class="content">
      <view class="title">弹窗 [u-popup]</view>
      <navigator url="/example/components/uPopup" hover-class="navigator-hover">
        <button>跳转到弹窗案例页面</button>
      </navigator>
    </view>
    <view class="content">
      <view class="title">列表加载刷新 [u-refresh]</view>
      <navigator url="/example/components/uRefresh?type=up" hover-class="navigator-hover">
        <button>下拉刷新上滑加载</button>
      </navigator>
      <navigator url="/example/components/uRefresh?type=down" hover-class="navigator-hover">
        <button>下拉刷新 不触发上滑加载</button>
      </navigator>
    </view>
  </view>
</template>
<script lang="ts">
export default {
  name: 'ExamplePage'
}
</script>
<script lang="ts" setup>
</script>

<style lang="scss" scoped>
  .example-page {
    .content {
      margin: 20px;
      border: 1px solid #999;
      .title {
        border-left: 4px solid #333;
        padding-left: 8px;
      }
    }
  }
</style>
